<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>ElevationLayer - 4.6</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #paneDiv {
            position: absolute;
            top: 18px;
            right: 18px;
            padding: 12px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
    <script src="https://js.arcgis.com/4.6/"></script>

    <script>
        require([
            "esri/Map",
            "esri/views/SceneView",
            "esri/layers/ElevationLayer",

            "dojo/on",
            "dojo/dom",
            "dojo/domReady!"
        ], function (Map, SceneView, ElevationLayer, on, dom) {
            var elevationLayer;

            // Create the Map
            var map = new Map({
                basemap: "topo",
                ground: "world-elevation"
            });

            // Create the MapView
            var view = new SceneView({
                container: "viewDiv",
                map: map,
                camera: {
                    position: [-121.83, 48.279, 1346],
                    heading: 300,
                    tilt: 60
                }
            });

            // Create elevation layer and add to the map
            elevationLayer = new ElevationLayer({
                url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/OsoLandslide/OsoLandslide_After_3DTerrain/ImageServer",
                visible: false
            });

            map.ground.layers.add(elevationLayer);

            // Register events on the checkbox and create the callback function
            on(dom.byId("landslideInput"), "change", function (e) {
                // If checkbox is checked, use after landslide elevation data
                elevationLayer.visible = dom.byId("landslideInput").checked;
            });
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
    <div id="paneDiv">
        <div>
            <a href="https://en.wikipedia.org/wiki/2014_Oso_mudslide">The 2014 Oso Landslide</a>
        </div>
        <input id="landslideInput" type="checkbox"> Use elevation data from after landslide
    </div>
</body>

</html>